import React, {PureComponent} from "react"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
import cs from  "classnames";
import { cloneDeep,find} from "lodash";
import PropTypes from "prop-types";
/*ant 组件*/
import {Timeline,Input,Button,Icon,Select,Row,Col,Card} from "antd"
import {sexTypes} from "../../const";
import {addAdmin} from "../actions";
/*css依赖*/
import "./organize.less"
const propTypes = {
    close: PropTypes.func.isRequired,
    info: PropTypes.object.isRequired,
    restPerson:PropTypes.array.isRequired,
    admin:PropTypes.array.isRequired,
};
/*redux连接池*/
@connect(
    ({duty,base,role}) => ({
        duty:duty.duty
    }),
    (dispatch) => (
        bindActionCreators({
            addAdmin,
        }, dispatch)
    )
)
export default class Index extends PureComponent {
    state = {
        choose:[],//选中的
        filter:"",
    };
    render() {
        let {close,info} = this.props;
        let {choose} = this.state;
        return (
            <div  className="organize-modal organize-addPerson organize-addAdmin">
                <h4>
                    <span onClick={close}><Icon type="left" />返回</span>
                    <Button onClick={this.doAddAdmin}>
                        <Icon type="plus" />添加 ({choose.length})
                    </Button>
                </h4>
                <h5>{info.name} &emsp;<span></span> <span>正在添加管理员...</span></h5>
                <div className="organize-addAdmin-filter">
                    <Input.Search
                        placeholder="搜索姓名"
                        style={{ width: 280}}
                        onSearch={this.onSearch}
                    />
                </div>
                <div className="organize-addAdmin-list">
                    {
                        this.list()
                    }
                </div>
                <p className="organize-addPerson-desc">*仅admin和拥有账户管理权限的用户，才可对职务与角色进行操作</p>
            </div>
        )
    }
    doAddAdmin=()=>{
        let {info,addAdmin} = this.props;
        let {choose} = this.state;
        addAdmin({
            staffId:info.id,
            info:choose
        })
        this.setState({
            choose:[]
        })
    }
    onSearch=(e)=>{
        this.setState({
            filter:e
        })
    };
    add=(item)=>{
        let {choose} = this.state;
        let arr = cloneDeep(choose);
        console.info(item)
        if(choose.indexOf(item.id)>-1){
            console.info("已结存储")
            arr = choose.filter(i=>{
                return i != item.id;
            })
        }else{
            arr.push(item.id);
        }
        console.info("没有",arr)
        this.setState({
            choose:arr
        })
    };
    list=()=>{
        let {restPerson,duty} = this.props;
        let {filter,choose} = this.state;
        console.info("choose",choose,restPerson)
        return restPerson.filter(y=>{
            return y.realName.indexOf(filter)>-1;
        }).map(i=>{
            let dutyInfo = find(duty,z=>{
                return z.id == i.duty
            });
            console.info('cs',choose.indexOf(i.id)>-1?"active":"")
            return <div key={i.id} className={cs(choose.indexOf(i.id)>-1?"active":"")} onClick={()=>{this.add(i)}}>
                <p>{i.realName}</p>
                <p>{
                    dutyInfo.name
                }</p>
            </div>
        })
    }
    componentDidMount() {
    }
}
